<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/operation.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id='operationDemo'>
	<!-- API区 -->
	<div title='API' tabid='apitab'><br />
        <h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#operationApi')">1.IGrid操作operation属性配置表</a></h2>
	 	<div style="display:none" id="operationApi">
	 		<form class="init ccay-form">
			<div class="ccay-form-body  ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.operation.openDemo('tab1');">点击查看Demo</a></h5></span>
					</li>
				</ul>
			</div>		
			<div class="ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="search"></samp>
						<span class="ccay-form-input">{Object} 设置IGrid的查询数据操作
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="btn"></samp>
										<span class="ccay-form-input">{String} 指定查询按钮的id<br><h6>示例：btn：'#btnSearch'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="panel"></samp>
										<span class="ccay-form-input">{String} 指定查询表单的id<br><h6>示例：panel：'#searchForm'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="autoSearch"></samp>
										<span class="ccay-form-input">{boolean} 设置是否会自动加载默认参数，默认为true<br><h6>示例：autoSearch：false</h6></span>
			                		</li>
	                            </ul>
	                       </div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="del"></samp>
						<span class="ccay-form-input">{Object} 设置IGrid的预删除数据或者自定义删除数据操作
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="btn"></samp>
										<span class="ccay-form-input">{String} 指定标记删除按钮的id<br><h6>示例：btn：'#btnDel'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="undoBtn"></samp>
										<span class="ccay-form-input">{String} 指定取消标记删除按钮的id<br><h6>示例：undoBtn：'#btnUndoDel'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="url"></samp>
										<span class="ccay-form-input">{String} 指定删除数据的请求地址</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="ajax"></samp>
										<span class="ccay-form-input">{Object} 指定删除数据的ajax请求</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="msg"></samp>
										<span class="ccay-form-input">{Object} 指定删除数据的提示信息<br>confirm：删除数据的提示信息<br>noSelected：未选中数据的提示信息</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fnConfirm"></samp>
										<span class="ccay-form-input">{Function} 指定删除数据的提示方法</span>
			                		</li>
			                		<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fnBeforeDelete(dataset, ajax, optOp, grid)"></samp>
										<span class="ccay-form-input">{Function} 设置igrid的ajax直接删除数据之前的事件<br>dataset：{Array} 删除数据集<br>ajax：{Object} 删除请求设置<br>optOp：{Object} 删除的参数配置<br>grid：{Object} IGrid对象</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fnBeforeDelete(isDel, record, row, optOp, grid)"></samp>
										<span class="ccay-form-input">{Function} 设置igrid预删除单行数据之前的事件<br>isDel：{Boolean} 是否删除<br>record：{Object} 删除数据<br>row：{Object} 删除行对象<br>optOp：{Object} 删除的参数配置<br>grid：{Object} IGrid对象</span>
									</li>
	                            </ul>
	                       </div>
						</span>
					</li>					
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="insert"></samp>
						<span class="ccay-form-input">{Object} 设置IGrid的增加数据常用操作<h5><a onclick="Ccay.example.ui.igird.operation.openDemo('faqtab');">点击查看更多关于 insert 操作</a></h5>
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="btn"></samp>
										<span class="ccay-form-input">{String} 指定增加按钮的id<br><h6>示例：btn：'#btnAdd'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="copy"></samp>
										<span class="ccay-form-input">{Boolean} 设置是否复制勾选的数据为新添加的数据，默认为false<br><h6>示例：copy：true</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="clear"></samp>
										<span class="ccay-form-input">{Array} 设置清除新增单元格内的数据，其值对应columns的field值<br><h6>示例：clear：["id", "name"...]</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="defaultRow"></samp>
										<span class="ccay-form-input">{Object} 指定添加的数据，其属性对应columns的field值</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="trTmpl"></samp>
										<span class="ccay-form-input">{String} 设置新增单元格的模板</span>
			                		</li>
	                            </ul>
	                       </div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="save"></samp>
						<span class="ccay-form-input">{Object} 设置IGrid的保存增、删、改的数据操作
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="btn"></samp>
										<span class="ccay-form-input">{String} 指定保存按钮的id<br><h6>示例：btn：'#btnSave'</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="ajax"></samp>
										<span class="ccay-form-input">{Object} 指定数据提交的请求参数<br></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fnBeforeSave(dataset, ajax, grid, optOp)"></samp>
										<span class="ccay-form-input">{Object} 设置igrid保存数据之前的事件<br>dataset：{Array} 删除数据集<br>ajax：{Object} 保存请求设置<br>grid：{Object} IGrid对象<br>optOp：{Object} 保存的参数配置</span>
			                		</li>
	                            </ul>
	                       </div>
						</span>
					</li>
				</ul>
			</div>
			</form>
			<span>其他属性设置请查看 <a href="#!ccay/example/demo/ui/igrid/base.html">"IGrid基础功能"</a> 的API介绍</span>
	 	</div><br>
	 	
	 	<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#btnsApi')">2.IGrid操作按钮列btns属性配置表</a></h2>
	 	<div style="display:none" id="btnsApi">
	 		<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.operation.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="columnType"></samp>
						<span class="ccay-form-input">其值必须为："operate" </span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="btns"></samp>
						<span class="ccay-form-input">{Array} 设置igrid内置列编辑按钮操作的配置，如下：<br />
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
                                    <li class="ccay-form-row">
		                        		<samp><h3>基础属性配置</h3></samp>
				                		<span class="ccay-form-input"><h3>描述</h3></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="field"></samp>
										<span class="ccay-form-input">{String} 设置该列对于数据源中的某一列属性的绑定，可进行自定义绑定。<br>
										<h6>示例：field: "name + ':[' + id + ']'"</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="text"></samp>
										<span class="ccay-form-input">{String} 设置该列页面显示的值，也可以使用模板。<br>
										<h6>示例：text: "${id}"</h6></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="type"></samp>
										<span class="ccay-form-input">{String} 设置该列的操作类型：'input'、'link'、'img'，默认为'link'<br>
										'input'：普通按钮操作<br>'link'：链接按钮操作<br>'img'：图片按钮操作</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="imgtype"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的图片类型。<span class="showClew">当type:'img'时有效</span>，具体配置将在《基础组件>按钮API》中描述，其值对应按钮的type属性
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/button/button.html');">点击查看</a></h5></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="permission"></samp>
										<span class="ccay-form-input">{String} 设置该列所具有的权限，如果有权限才生成该代码，否则返回空字符串。
										<br><h6>示例：permission:"Service$HtmlArea$create"</h6> // 可传空字符串，则不绑定权限</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="isIi8n"></samp>
										<span class="ccay-form-input">{Boolean} 设置该列是否需要国际化</span>
			                		</li>
			                		<li class="ccay-form-row">
						                <samp><h3>Event属性配置</h3></samp>
								        <span class="ccay-form-input"><h3>描述</h3></span>
							        </li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="click"></samp>
										<span class="ccay-form-input">{Function} 设置该列的点击事件，其值可为事件类型或者字符串类型</span>
			                		</li>
			                	</ul>
							</div>
						</span>
					</li>
				</ul>
			</div>
			</form>
	 	</div>
	</div>
   
	<!-- Demo区 -->
	<!-- ----------------------------------- 增删改操作--------------------------------------- -->
	<div title='增删改查操作' tabid='tab1'>
		<span class="showClew">备注：1.IGrid增删改查操作Demo展示了表单查询、链接操作列功能<br>2.可进行增、删、改、保存数据功能，并获取（选中、添加、更新、删除）数据</span><br /><br />
		<form id="searchForm" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
					<li class="ccay-form-row">
				  		<samp class="i18n require" i18nKey="Sex"></samp>
				  		<span class='ccay-form-input'><input type="text" class="required" name="sex" id="sex1"/></span>
					</li>
					<li class="ccay-form-row">
				  		<samp class="i18n require" i18nKey="Hobby"></samp>
				  		<span class='ccay-form-input'><input type="text" class="init ccay-combobox" name="hobby" service="ENUM:HobbyEnum"/></span>
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>	     
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnDel" value='delete' type='button' />
			<input id="btnUndoDel" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnAdd" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnSave" value='save' type='button' />
		</div>
		<div id="iGrid1"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'>
&lt;!-- 查询表单 -->
&lt;form id="searchForm01" class="init ccay-form">
	&lt;!-- 条件输入区域 -->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="sex" id="sSex"/>
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;input type="button" id="btnSearch01" class="i18n default" i18nKey="ccay.common.button.search" />
		&lt;input type="reset" class="i18n" i18nKey="ccay.common.button.reset"/>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemo').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemo').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel01" value='delete' type='button' />
	&lt;input id="btnUndoDel01" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemo').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd01" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemo').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave01" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemo">&lt;/div>			
			</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js1'>
$("#sSex").dropdown({showfirstItem:false}, [{value:0, text:"女"},{value:1, text:"男"}]);

//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
	
//<span class="showClew"> 设置链接按钮属性</span>
var linkBtns = [
	//<span class="showClew"> field值为该列对于数据源中的某一列属性的绑定，可进行自定义绑定</span>
	{text: "${name}", click: operateTest}
];

//<span class="showClew"> 自定义渲染器参数设置</span>
var showLastDate = {
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	},
	format: function (value, format){
   		return Ccay.Format.toDateBefore(value);
   	},
	render: function (target, value, format) {
       	target.html(this.format(value, format));
   	}
};

var gridOption = {
	height: 300,
	wrap: true,
	editMode: true,
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cache: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"] 
	},
	columns: [
		{columnType: 'select', multi: true},
        
		//<span class="showClew"> columnType:'operate'设置该列显示操作样式，可进行操作功能；btns值为编辑按钮操作的配置</span>
		{width: 70, freezeable: true, columnType: 'operate', btns: linkBtns},
		{field: 'name', width: 70, header: "ccay.common.label.name", freezeable:true, rule: {required: true}},
		//<span class="showClew"> shortChecked:true。bool,checkbox类型可以点击就选中或者取消</span>
		{field: 'sex', width:50, header: "sSex", type: 'bool', format: {isIcon: true},editorOp:{shortChecked:true}},
		{field: 'age', width:50, header: "sAge", type: 'integer', rule: {range: [16, 80]}},
		{field: 'birthday', width:80, header: "sBirthday", type: 'date'},
		{field: 'province', width:80, header: "sProvince", type: 'enum', editorOp: {id: "comboProvince",afterTrigger:["city"]}, format: {service:"LOOKUP:province",valueField:"itemCode",displayField:"itemName"}},
		{field: 'address', valueField: 'city', width:70, header: "sCity", type: 'enum', editorOp: {trigger:["province"],conf:{connector:"#comboProvince",lazyload:false,ajax:{url:'services/ccay/lookup/itemquery/list/city/{0}'}}}, format: {valueField:"itemCode",displayField:"itemName"}},
		{field: 'pass', width:100, header: "sPass", type: 'rate', format: {htmlView: true, section: [20, 50, 60]}},
		{field: 'tuition', width:100, header: "sTuition", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
		{field: 'card', width:90, header: "sHobby", type: 'enum', editorOp: {conf:{multi: true}}, format:{service:'FN:Ccay.example.ui.igird.operation.hobbyData',valueField:'pCode',displayField:'pName'}},
		{field: 'mail', width:100, header: "sMail",  rule: {email: true}},
		{field: 'blog', width:170, header: "sBlog", type:'textarea', rule: {url: true}},
		{field: 'lastUpdateDate', width:130, header: "lastUpdatedDate", editable: false, type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)},
	 	{field: "country",width:110, header: "country", type: 'country'},
	 	{field: "companyName",valueField:"companyCode",width:110, header: "company", type: 'company'},
		{field: "currency",width:110, header: "iCurrency", type: 'iCurrency'},
		{field: "areaName",valueField:"areaCode",width:110, header: "area", type: 'area',format:{areaLabel:"Region"}},
		{field: 'location',width:110, header: "location", type: 'location',format:{level:1},editorOp: {trigger: ["attr1", "attr2"]}},
		{field: 'attr1',width:110, header: "location(1)", type: 'location',format:{level:2,connector:"#location"},editorOp: {trigger: ["location", "attr2"]}},
		{field: 'attr2',width:110, header: "location(2)", type: 'location',format:{level:3,connector:"#attr1"},editorOp: {trigger: ["location", "attr1"]}},
		{field: "pbi",width:110, header: "pbi", type: 'pbi',format:{readonly:true}}
    ],
	ajax: {
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	//<span class="showClew"> 设置igrid的操作配置项</span>
    operation: {
    	
    	//<span class="showClew"> 设置igrid的查询数据操作 </span>
    	search: {
    		//<span class="showClew"> 指定查询按钮的id</span>
    		btn: '#btnSearch01',
    		//<span class="showClew"> 指定查询表单的id</span>
			panel: '#searchForm01'
    	},
    	
    	//<span class="showClew"> 设置igrid的标记删除数据操作  </span>
    	del: {
    		//<span class="showClew"> 指定标记删除按钮的id</span>
    		btn: '#btnDel01',
    		//<span class="showClew"> 指定取消标记删除按钮的id</span>
    		undoBtn: '#btnUndoDel01'
    	},
    	
    	//<span class="showClew"> 设置igrid的增加数据操作  </span>
    	insert: {
    		//<span class="showClew"> 指定增加按钮的id</span>
    		btn: '#btnAdd01',
    		//<span class="showClew"> 设置复制勾选的数据为新添加的数据</span>
    		copy: true,
    		//<span class="showClew"> 设置清除新增单元格内的数据，其值对应columns的field值</span>
    		clear: ['id', 'name', 'lastUpdateDate'],
    		//<span class="showClew"> 指定添加的数据，其属性对应columns的field值</span>
    		defaultRow:{sex:1, birthday:'', blog:'http://', tuition:'0'}
    	},
    	
    	//<span class="showClew"> 设置igrid的保存增、删、改的数据操作 </span>
    	save: {
    		//<span class="showClew"> 指定保存按钮的id</span>
    		btn: '#btnSave01',
    		//<span class="showClew"> 指定数据提交的请求参数</span>
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$("#igridDemo").igrid(gridOption);
	      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	</div> 
	
	<!-- ----------------------------------- 添加完成加载之后勾选数据--------------------------------------- -->
	<div title='加载完成之后全选' tabid='tabAll'>
		<span class="showClew">备注：1.IGrid增删改查操作Demo展示了表单查询、链接操作列功能<br>2.可进行增、删、改、保存数据功能，并获取（选中、添加、更新、删除）数据</span><br /><br />
		<form id="searchFormAll" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
					<li class="ccay-form-row">
				  		<samp class="i18n require" i18nKey="Sex"></samp>
				  		<span class='ccay-form-input'><input type="text" class="required" name="sex" id="sex1All"/></span>
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnSearchAll" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>	     
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnDelAll" value='delete' type='button' />
			<input id="btnUndoDelAll" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnAddAll" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnSaveAll" value='save' type='button' />
		</div>
		<div id="iGrid1All"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1All'>
&lt;!-- 查询表单 -->
&lt;form id="searchForm01All1" class="init ccay-form">
	&lt;!-- 条件输入区域 -->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="sex" id="sSexAll1"/>
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;input type="button" id="btnSearch01All1" class="i18n default" i18nKey="ccay.common.button.search" />
		&lt;input type="reset" class="i18n" i18nKey="ccay.common.button.reset"/>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemoAll1').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemoAll1').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel01All1" value='delete' type='button' />
	&lt;input id="btnUndoDel01All1" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemoAll1').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd01All1" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemoAll1').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave01All1" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemoAll1">&lt;/div>			
			</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js1All'>
$("#sSexAll1").dropdown({showfirstItem:false}, [{value:0, text:"女"},{value:1, text:"男"}]);

//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
	
//<span class="showClew"> 设置链接按钮属性</span>
var linkBtns = [
	//<span class="showClew"> field值为该列对于数据源中的某一列属性的绑定，可进行自定义绑定</span>
	{text: "${name}", click: operateTest}
];

//<span class="showClew"> 自定义渲染器参数设置</span>
var showLastDate = {
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	},
	format: function (value, format){
   		return Ccay.Format.toDateBefore(value);
   	},
	render: function (target, value, format) {
       	target.html(this.format(value, format));
   	}
};

var gridOptionAll1 = {
	height: 300,
	wrap: true,
	editMode: true,
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cache: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"] 
	},
	columns: [
		{columnType: 'select', multi: true},
        
		//<span class="showClew"> columnType:'operate'设置该列显示操作样式，可进行操作功能；btns值为编辑按钮操作的配置</span>
		{width: 70, freezeable: true, columnType: 'operate', btns: linkBtns},
		{field: 'name', width: 70, header: "ccay.common.label.name", freezeable:true, rule: {required: true}},
		//<span class="showClew"> shortChecked:true。bool,checkbox类型可以点击就选中或者取消</span>
		{field: 'sex', width:50, header: "sSex", type: 'bool', format: {isIcon: true},editorOp:{shortChecked:true}},
		{field: 'age', width:50, header: "sAge", type: 'integer', rule: {range: [16, 80]}},
		{field: 'birthday', width:80, header: "sBirthday", type: 'date'},
		{field: 'province', width:80, header: "sProvince", type: 'enum', editorOp: {id: "comboProvince",afterTrigger:["city"]}, format: {service:"LOOKUP:province",valueField:"itemCode",displayField:"itemName"}},
		{field: 'address', valueField: 'city', width:70, header: "sCity", type: 'enum', editorOp: {trigger:["province"],conf:{connector:"#comboProvince",lazyload:false,ajax:{url:'services/ccay/lookup/itemquery/list/city/{0}'}}}, format: {valueField:"itemCode",displayField:"itemName"}},
		{field: 'pass', width:100, header: "sPass", type: 'rate', format: {htmlView: true, section: [20, 50, 60]}},
		{field: 'tuition', width:100, header: "sTuition", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
		{field: 'card', width:90, header: "sHobby", type: 'enum', editorOp: {conf:{multi: true}}, format:{service:'FN:Ccay.example.ui.igird.operation.hobbyData',valueField:'pCode',displayField:'pName'}},
		{field: 'mail', width:100, header: "sMail",  rule: {email: true}},
		{field: 'blog', width:170, header: "sBlog", type:'textarea', rule: {url: true}},
		{field: 'lastUpdateDate', width:130, header: "lastUpdatedDate", editable: false, type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)},
	 	{field: "country",width:110, header: "country", type: 'country'},
	 	{field: "companyName",valueField:"companyCode",width:110, header: "company", type: 'company'},
		{field: "currency",width:110, header: "iCurrency", type: 'iCurrency'},
		{field: "areaName",valueField:"areaCode",width:110, header: "area", type: 'area',format:{areaLabel:"Region"}},
		{field: 'location',width:110, header: "location", type: 'location',format:{level:1},editorOp: {trigger: ["attr1", "attr2"]}},
		{field: 'attr1',width:110, header: "location(1)", type: 'location',format:{level:2,connector:"#location"},editorOp: {trigger: ["location", "attr2"]}},
		{field: 'attr2',width:110, header: "location(2)", type: 'location',format:{level:3,connector:"#attr1"},editorOp: {trigger: ["location", "attr1"]}},
		{field: "pbi",width:110, header: "pbi", type: 'pbi',format:{readonly:true}}
    ],
	ajax: {
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
   // <font style="color:red">igrid  加载完成之后全选</font>	
	   fnDataBindComplete:function(){
				 var grid=$S("#igridDemoAll1").manager();
				 grid.getHeadTable().find("td.igrid-selectAll").click();
		}
	
	,
	//<span class="showClew"> 设置igrid的操作配置项</span>
    operation: {
    	
    	//<span class="showClew"> 设置igrid的查询数据操作 </span>
    	search: {
    		//<span class="showClew"> 指定查询按钮的id</span>
    		btn: '#btnSearch01All1',
    		//<span class="showClew"> 指定查询表单的id</span>
			panel: '#searchForm01All1'
    	},
    	
    	//<span class="showClew"> 设置igrid的标记删除数据操作  </span>
    	del: {
    		//<span class="showClew"> 指定标记删除按钮的id</span>
    		btn: '#btnDel01All1',
    		//<span class="showClew"> 指定取消标记删除按钮的id</span>
    		undoBtn: '#btnUndoDel01All1'
    	},
    	
    	//<span class="showClew"> 设置igrid的增加数据操作  </span>
    	insert: {
    		//<span class="showClew"> 指定增加按钮的id</span>
    		btn: '#btnAdd01All1',
    		//<span class="showClew"> 设置复制勾选的数据为新添加的数据</span>
    		copy: true,
    		//<span class="showClew"> 设置清除新增单元格内的数据，其值对应columns的field值</span>
    		clear: ['id', 'name', 'lastUpdateDate'],
    		//<span class="showClew"> 指定添加的数据，其属性对应columns的field值</span>
    		defaultRow:{sex:1, birthday:'', blog:'http://', tuition:'0'}
    	},
    	
    	//<span class="showClew"> 设置igrid的保存增、删、改的数据操作 </span>
    	save: {
    		//<span class="showClew"> 指定保存按钮的id</span>
    		btn: '#btnSave01All1',
    		//<span class="showClew"> 指定数据提交的请求参数</span>
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$("#igridDemoAll1").igrid(gridOptionAll1);
	      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js1All').html(),$('#html1All').html())">亲自试一试</a>
		</div>
	</div> 
	
	<!-- ----------------------------------点击保存的时候结束编辑----------------------------------------------------- -->
	<div title='点击保存  结束编辑' tabid='tabeDitMode'>
		<span class="showClew">备注：1.IGrid增删改查操作Demo展示了表单查询、链接操作列功能<br>2.可进行增、删、改、保存数据功能，并获取（选中、添加、更新、删除）数据</span><br /><br />
		<form id="searchFormDitMode" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
					<li class="ccay-form-row">
				  		<samp class="i18n require" i18nKey="Sex"></samp>
				  		<span class='ccay-form-input'><input type="text" class="required" name="sex" id="sex1DitMode"/></span>
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnSearchDitMode" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>	     
		<div class="ccay-grid-toolbar">
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1DitMode').manager().getSelectedRecords());" value='get selected records' type='button' />	
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1DitMode').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
			<input id="btnDelDitMode" value='delete' type='button' />
			<input id="btnUndoDelDitMode" value='undo delete' type=button />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1DitMode').manager().getDeletedRecords());" value='get deleted records' type='button' />
			<input id="btnAddDitModeDitMode" value='insert' type='button' />
			<input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGrid1DitMode').manager().getInsertedRecords());" value='get inserted records' type='button' />
			<input id="btnSaveDitModeDitMode" value='save' type='button' />
		</div>
		<div id="iGrid1DitMode"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1DitMode'>
&lt;!-- 查询表单 -->
&lt;form id="searchForm01DitMode" class="init ccay-form">
	&lt;!-- 条件输入区域 -->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="sex" id="sSexDitMode"/>
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;input type="button" id="btnSearch01DitMode" class="i18n default" i18nKey="ccay.common.button.search" />
		&lt;input type="reset" class="i18n" i18nKey="ccay.common.button.reset"/>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel01DitMode" value='delete' type='button' />
	&lt;input id="btnUndoDel01DitMode" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd01DitMode" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave01DitMode" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemoDitMode">&lt;/div>			
			</pre>
	  	</div>
	  	<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js1DitMode'>
$("#sSexDitMode").dropdown({showfirstItem:false}, [{value:0, text:"女"},{value:1, text:"男"}]);

//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
	
//<span class="showClew"> 设置链接按钮属性</span>
var linkBtns = [
	//<span class="showClew"> field值为该列对于数据源中的某一列属性的绑定，可进行自定义绑定</span>
	{text: "${name}", click: operateTest}
];

//<span class="showClew"> 自定义渲染器参数设置</span>
var showLastDate = {
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	},
	format: function (value, format){
   		return Ccay.Format.toDateBefore(value);
   	},
	render: function (target, value, format) {
       	target.html(this.format(value, format));
   	}
};

var gridOptionDitMode = {
	height: 300,
	wrap: true,
	editMode: true,
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cache: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"] 
	},
	columns: [
		{columnType: 'select', multi: true},
        
		//<span class="showClew"> columnType:'operate'设置该列显示操作样式，可进行操作功能；btns值为编辑按钮操作的配置</span>
		{width: 70, freezeable: true, columnType: 'operate', btns: linkBtns},
		{field: 'name', width: 70, header: "ccay.common.label.name", freezeable:true, rule: {required: true}},
		//<span class="showClew"> shortChecked:true。bool,checkbox类型可以点击就选中或者取消</span>
		{field: 'sex', width:50, header: "sSex", type: 'bool', format: {isIcon: true},editorOp:{shortChecked:true}},
		{field: 'age', width:50, header: "sAge", type: 'integer', rule: {range: [16, 80]}},
		{field: 'birthday', width:80, header: "sBirthday", type: 'date'},
		{field: 'province', width:80, header: "sProvince", type: 'enum', editorOp: {id: "comboProvince",afterTrigger:["city"]}, format: {service:"LOOKUP:province",valueField:"itemCode",displayField:"itemName"}},
		{field: 'address', valueField: 'city', width:70, header: "sCity", type: 'enum', editorOp: {trigger:["province"],conf:{connector:"#comboProvince",lazyload:false,ajax:{url:'services/ccay/lookup/itemquery/list/city/{0}'}}}, format: {valueField:"itemCode",displayField:"itemName"}},
		{field: 'pass', width:100, header: "sPass", type: 'rate', format: {htmlView: true, section: [20, 50, 60]}},
		{field: 'tuition', width:100, header: "sTuition", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
		{field: 'card', width:90, header: "sHobby", type: 'enum', editorOp: {conf:{multi: true}}, format:{service:'FN:Ccay.example.ui.igird.operation.hobbyData',valueField:'pCode',displayField:'pName'}},
		{field: 'mail', width:100, header: "sMail",  rule: {email: true}},
		{field: 'blog', width:170, header: "sBlog", type:'textarea', rule: {url: true}},
		{field: 'lastUpdateDate', width:130, header: "lastUpdatedDate", editable: false, type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)},
	 	{field: "country",width:110, header: "country", type: 'country'},
	 	{field: "companyName",valueField:"companyCode",width:110, header: "company", type: 'company'},
		{field: "currency",width:110, header: "iCurrency", type: 'iCurrency'},
		{field: "areaName",valueField:"areaCode",width:110, header: "area", type: 'area',format:{areaLabel:"Region"}},
		{field: 'location',width:110, header: "location", type: 'location',format:{level:1},editorOp: {trigger: ["attr1", "attr2"]}},
		{field: 'attr1',width:110, header: "location(1)", type: 'location',format:{level:2,connector:"#location"},editorOp: {trigger: ["location", "attr2"]}},
		{field: 'attr2',width:110, header: "location(2)", type: 'location',format:{level:3,connector:"#attr1"},editorOp: {trigger: ["location", "attr1"]}},
		{field: "pbi",width:110, header: "pbi", type: 'pbi',format:{readonly:true}}
    ],
	ajax: {
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
   // <font style="color:red">igrid 编辑没有结束点击保存成功 </font>	
	   onRowClick:function(value,rowData,td,tr){
			//Igrid结束编辑
			var igrid = $("#igridDemoDitMode").manager();
			var activeEditor = igrid.getActiveEditor() || [];
			$.each(activeEditor,function(i,editor){
				Ccay.UI.IGrid.Editor.endEdit(editor,igrid,igrid.op);
			});
			igrid.clearActiveEditor();
		},
	//<span class="showClew"> 设置igrid的操作配置项</span>
    operation: {
    	
    	//<span class="showClew"> 设置igrid的查询数据操作 </span>
    	search: {
    		//<span class="showClew"> 指定查询按钮的id</span>
    		btn: '#btnSearch01DitMode',
    		//<span class="showClew"> 指定查询表单的id</span>
			panel: '#searchForm01DitMode'
    	},
    	
    	//<span class="showClew"> 设置igrid的标记删除数据操作  </span>
    	del: {
    		//<span class="showClew"> 指定标记删除按钮的id</span>
    		btn: '#btnDel01DitMode',
    		//<span class="showClew"> 指定取消标记删除按钮的id</span>
    		undoBtn: '#btnUndoDel01DitMode'
    	},
    	
    	//<span class="showClew"> 设置igrid的增加数据操作  </span>
    	insert: {
    		//<span class="showClew"> 指定增加按钮的id</span>
    		btn: '#btnAdd01DitMode',
    		//<span class="showClew"> 设置复制勾选的数据为新添加的数据</span>
    		copy: true,
    		//<span class="showClew"> 设置清除新增单元格内的数据，其值对应columns的field值</span>
    		clear: ['id', 'name', 'lastUpdateDate'],
    		//<span class="showClew"> 指定添加的数据，其属性对应columns的field值</span>
    		defaultRow:{sex:1, birthday:'', blog:'http://', tuition:'0'}
    	},
    	
    	//<span class="showClew"> 设置igrid的保存增、删、改的数据操作 </span>
    	save: {
    		//<span class="showClew"> 指定保存按钮的id</span>
    		btn: '#btnSave01DitMode',
    		//<span class="showClew"> 指定数据提交的请求参数</span>
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$("#igridDemoDitMode").igrid(gridOptionDitMode);
	      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js1DitMode').html(),$('#html1DitMode').html())">亲自试一试</a>
		</div>
	</div>   
	
	<!-- ----------------------------------- insert增加行时固定光标的前或后--------------------------------------- -->
	<div title='insert增加行时固定光标的前或后' tabid='tab1Insert'>
    <span class="showClew">备注：1.IGrid增删改查操作Demo展示了表单查询、链接操作列功能<br>2.可进行增、删、改、保存数据功能，并获取（选中、添加、更新、删除）数据</span><br /><br />
    <form id="searchFormInsert" class="init ccay-form">
      <div class="ccay-form-body">
        <ul>
          <li class="ccay-form-row">
            <samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
            <span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span> 
          </li>
          <li class="ccay-form-row">
              <samp class="i18n require" i18nKey="Sex"></samp>
              <span class='ccay-form-input'><input type="text" class="required" name="sex" id="sexInsert"/></span>
          </li>
        </ul>
      </div>
      <div class="ccay-operate">
        <span id="btnSearchInsert" class="ccay-button default" >
          <a class="ccay-icon search"></a>
          <label class="i18n" i18nKey="ccay.common.button.search"></label>
        </span>
        <span class="init button ccay-button reset" >
          <a class="ccay-icon reset"></a>
          <label class="i18n" i18nKey="ccay.common.button.reset"></label>
        </span>
      </div>
    </form>      
    <div class="ccay-grid-toolbar">
      <input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGridInsert').manager().getSelectedRecords());" value='get selected records' type='button' />  
      <input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGridInsert').manager().getUpdatedRecords());" value='get updated records' type='button' />       
      <input id="btnDelInsert" value='delete' type='button' />
      <input id="btnUndoDelInsert" value='undo delete' type=button />
      <input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGridInsert').manager().getDeletedRecords());" value='get deleted records' type='button' />
      <input id="btnAddInsert" value='insert' type='button' />
      <input onclick="Ccay.example.ui.igird.operation.operateTest($('#iGridInsert').manager().getInsertedRecords());" value='get inserted records' type='button' />
      <input id="btnSaveInsert" value='save' type='button' />
    </div>
    <div id="iGridInsert"></div>
    <h3>html Code</h3>
      <span></span>
      <div class="codeArea">
             <pre id='html1DitMode'>
&lt;!-- 查询表单 -->
&lt;form id="searchForm01DitMode" class="init ccay-form">
	&lt;!-- 条件输入区域 -->
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="name">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="name" />
				&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>
				&lt;span class='ccay-form-input'>
					&lt;input type="text" name="sex" id="sSexDitMode"/>
				&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	
	&lt;!--查询操作区域-->
	&lt;div class="ccay-operate">
		&lt;input type="button" id="btnSearch01DitMode" class="i18n default" i18nKey="ccay.common.button.search" />
		&lt;input type="reset" class="i18n" i18nKey="ccay.common.button.reset"/>
	&lt;/div>
&lt;/form>

&lt;!--Grid操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getSelectedRecords());" value='get selected records' type='button' />	
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getUpdatedRecords());" value='get updated records' type='button' />		   
	&lt;input id="btnDel01DitMode" value='delete' type='button' />
	&lt;input id="btnUndoDel01DitMode" value='undo delete' type=button />
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getDeletedRecords());" value='get deleted records' type='button' />
	&lt;input id="btnAdd01DitMode" value='insert' type='button' />
	&lt;input onclick="operateTest($('#igridDemoDitMode').manager().getInsertedRecords());" value='get inserted records' type='button' />
	&lt;input id="btnSave01DitMode" value='save' type='button' />
&lt;/div>

&lt;div id="igridDemoDitMode">&lt;/div>			
			</pre>
		</div>
		<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js1DitMode'>
$("#sSexDitMode").dropdown({showfirstItem:false}, [{value:0, text:"女"},{value:1, text:"男"}]);

//<span class="showClew"> 设置点击事件</span>	
operateTest = function (value) {
	alert(Ccay.DataHelper.toJsonStr(value));
};
	
//<span class="showClew"> 设置链接按钮属性</span>
var linkBtns = [
	//<span class="showClew"> field值为该列对于数据源中的某一列属性的绑定，可进行自定义绑定</span>
	{text: "${name}", click: operateTest}
];

//<span class="showClew"> 自定义渲染器参数设置</span>
var showLastDate = {
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	},
	format: function (value, format){
   		return Ccay.Format.toDateBefore(value);
   	},
	render: function (target, value, format) {
       	target.html(this.format(value, format));
   	}
};

var gridOptionDitMode = {
	height: 300,
	wrap: true,
	editMode: true,
	storageOp:{
		//<span class="showClew"> 设置igrid缓存数据</span>
		cache: true,
		
		//<span class="showClew"> 设置缓存key值</span>
		cacheKey: ["id"] 
	},
	columns: [
		{columnType: 'select', multi: true},
        
		//<span class="showClew"> columnType:'operate'设置该列显示操作样式，可进行操作功能；btns值为编辑按钮操作的配置</span>
		{width: 70, freezeable: true, columnType: 'operate', btns: linkBtns},
		{field: 'name', width: 70, header: "ccay.common.label.name", freezeable:true, rule: {required: true}},
		//<span class="showClew"> shortChecked:true。bool,checkbox类型可以点击就选中或者取消</span>
		{field: 'sex', width:50, header: "sSex", type: 'bool', format: {isIcon: true},editorOp:{shortChecked:true}},
		{field: 'age', width:50, header: "sAge", type: 'integer', rule: {range: [16, 80]}},
		{field: 'birthday', width:80, header: "sBirthday", type: 'date'},
		{field: 'province', width:80, header: "sProvince", type: 'enum', editorOp: {id: "comboProvince",afterTrigger:["city"]}, format: {service:"LOOKUP:province",valueField:"itemCode",displayField:"itemName"}},
		{field: 'address', valueField: 'city', width:70, header: "sCity", type: 'enum', editorOp: {trigger:["province"],conf:{connector:"#comboProvince",lazyload:false,ajax:{url:'services/ccay/lookup/itemquery/list/city/{0}'}}}, format: {valueField:"itemCode",displayField:"itemName"}},
		{field: 'pass', width:100, header: "sPass", type: 'rate', format: {htmlView: true, section: [20, 50, 60]}},
		{field: 'tuition', width:100, header: "sTuition", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
		{field: 'card', width:90, header: "sHobby", type: 'enum', editorOp: {conf:{multi: true}}, format:{service:'FN:Ccay.example.ui.igird.operation.hobbyData',valueField:'pCode',displayField:'pName'}},
		{field: 'mail', width:100, header: "sMail",  rule: {email: true}},
		{field: 'blog', width:170, header: "sBlog", type:'textarea', rule: {url: true}},
		{field: 'lastUpdateDate', width:130, header: "lastUpdatedDate", editable: false, type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)},
	 	{field: "country",width:110, header: "country", type: 'country'},
	 	{field: "companyName",valueField:"companyCode",width:110, header: "company", type: 'company'},
		{field: "currency",width:110, header: "iCurrency", type: 'iCurrency'},
		{field: "areaName",valueField:"areaCode",width:110, header: "area", type: 'area',format:{areaLabel:"Region"}},
		{field: 'location',width:110, header: "location", type: 'location',format:{level:1},editorOp: {trigger: ["attr1", "attr2"]}},
		{field: 'attr1',width:110, header: "location(1)", type: 'location',format:{level:2,connector:"#location"},editorOp: {trigger: ["location", "attr2"]}},
		{field: 'attr2',width:110, header: "location(2)", type: 'location',format:{level:3,connector:"#attr1"},editorOp: {trigger: ["location", "attr1"]}},
		{field: "pbi",width:110, header: "pbi", type: 'pbi',format:{readonly:true}}
    ],
	ajax: {
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	//<span class="showClew"> 设置igrid的操作配置项</span>
    operation: {
    	
    	//<span class="showClew"> 设置igrid的查询数据操作 </span>
    	search: {
    		//<span class="showClew"> 指定查询按钮的id</span>
    		btn: '#btnSearch01DitMode',
    		//<span class="showClew"> 指定查询表单的id</span>
			panel: '#searchForm01DitMode'
    	},
    	
    	//<span class="showClew"> 设置igrid的标记删除数据操作  </span>
    	del: {
    		//<span class="showClew"> 指定标记删除按钮的id</span>
    		btn: '#btnDel01DitMode',
    		//<span class="showClew"> 指定取消标记删除按钮的id</span>
    		undoBtn: '#btnUndoDel01DitMode'
    	},
    	
    	//<span class="showClew"> 设置igrid的增加数据操作  </span>
    	insert: {
    		//<span class="showClew"> 指定增加按钮的id</span>
    		btn: '#btnAdd01DitMode',
    		//<span class="showClew"> 设置复制勾选的数据为新添加的数据</span>
    		copy: true,
    		//<span class="showClew"> 设置清除新增单元格内的数据，其值对应columns的field值</span>
    		clear: ['id', 'name', 'lastUpdateDate'],
    		//<span class="showClew"> 指定添加的数据，其属性对应columns的field值</span>
    		defaultRow:{sex:1, birthday:'', blog:'http://', tuition:'0'},
    		
    		<span class="showClew">点击insert增加行时，这里是在列表最后一行新增行：通过children(':last')控制，然后通过position:"after"追加新的行</span>
    		_getInsertSet:function(grid,op){
                  return{
                  position:"after",//<font style="color:red">新添加是在参考前还是参考后（first/after）</font>
                  posTr: grid.getDataBody().children(':last')//<font style="color:red">新添行是 在列表最前还是最后位置(:first/:last)</font> 
                  }
            }
    	}, 
    	
    	//<span class="showClew"> 设置igrid的保存增、删、改的数据操作 </span>
    	save: {
    		//<span class="showClew"> 指定保存按钮的id</span>
    		btn: '#btnSave01DitMode',
    		//<span class="showClew"> 指定数据提交的请求参数</span>
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$("#igridDemoDitMode").igrid(gridOptionDitMode);
	      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js1DitMode').html(),$('#html1DitMode').html())">亲自试一试</a>
		</div>
	</div>
     
    <!-- ----------------------------------- 图标列增删改查操作 --------------------------------------- -->
	<div title='图标列增删改查操作' tabid='tab2'>
		<span class="showClew">备注：1.IGrid图标列增删改查操作Demo展示了表单查询、图标操作列功能<br>2.不可在列表上直接进行编辑，只可在图标操作列进行增、删、改数据功能</span><br /><br />
		<form id="searchIconForm" class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="ccay.common.label.name" ></samp>
						<span class="ccay-form-input"><input type="text" name="name" maxlength="20"/></span>	
					</li>
					<li class="ccay-form-row">
				  		<samp class="i18n" i18nKey="Sex"></samp>
				  		<span class='ccay-form-input'><input type="text" name="sex" id="sex2"/></span>
					</li>
				</ul>
			</div>
			<div class="ccay-operate">
				<span id="btnIconSearch" class="ccay-button default" >
					<a class="ccay-icon search"></a>
					<label class="i18n" i18nKey="ccay.common.button.search"></label>
				</span>
				<span class="init button ccay-button reset" >
					<a class="ccay-icon reset"></a>
					<label class="i18n" i18nKey="ccay.common.button.reset"></label>
				</span>
			</div>
		</form>
		<div class="ccay-grid-toolbar">
			<span class="ccay-button" onclick="Ccay.example.ui.igird.operation.editTest()">
				<a class="ccay-icon add"></a><label>Insert</label>
			</span>
			<span class="ccay-button" id="btnIconDel">
				<a class="ccay-icon del"></a><label>Delete</label>
			</span>	
		</div>
		<div id="iGrid2"></div>
		<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html2'>
&lt;form id="searchForm02" class="init ccay-form">
	&lt;div class="ccay-form-body">
		&lt;ul>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>
				&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>	
			&lt;/li>
			&lt;li class="ccay-form-row">
				&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>
				&lt;span class='ccay-form-input'>&lt;input type="text" name="sex" id="sex02"/>&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;div class="ccay-operate">
		&lt;input type="button" id="btnSearch02" class="i18n default" i18nKey="ccay.common.button.search" />
		&lt;input type="reset" class="i18n" i18nKey="ccay.common.button.reset"/>
	&lt;/div>
&lt;/form>
&lt;div class="ccay-grid-toolbar">
	&lt;span class="ccay-button" onclick="Ccay.example.ui.igird.operation.editTest()">
		&lt;a class="ccay-icon add">&lt;/a>&lt;label>Insert&lt;/label>
	&lt;/span>
	&lt;span class="ccay-button" id="btnIconDel02">
		&lt;a class="ccay-icon del">&lt;/a>&lt;label>Delete&lt;/label>
	&lt;/span>
&lt;/div>

&lt;div id="igridDemo2">&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js2'>
$("#sex02").dropdown({showfirstItem:false}, [{value:0, text:"女"},{value:1, text:"男"}]);

//<span class="showClew"> 设置新增和编辑按钮的弹出框，进行数据编辑</span>      		
editTest = function (rowData) {
	Ccay.Page.register("Ccay.example.ui.igird.showStudent","ccay/example/ui/igrid/showStudent.html");
	var showDlgOps = {
		width: 420,
		height: 370,
		cancelClick: true,
		okClick: function(){
			Ccay.example.ui.igird.showStudent.save();
		},
		fnLoad: function(){
			Ccay.example.ui.igird.showStudent.init(rowData);
		}
	};
	Ccay.UI.dialog("Ccay.example.ui.igird.showStudent", "ccay.workflow.label.edit", showDlgOps);
};

//<span class="showClew"> 设置删除按钮操作</span> 
deleteTest = function (rowData) {
	Ccay.UI.confirm("ccay.common.message.confdel", function (result) {
		if (result && rowData) {
			var dataObj = {items2Create:[], items2Update:[], items2Delete:[rowData]};
			Ccay.doPut("services/ccay/demo/student/batch", dataObj, function(){
				Ccay.UI.topBox("ccay.common.message.success");
				$("#igridDemo2").manager().reload(false, true);
			});
		}
	});
};

//<span class="showClew"> 设置图标按钮属性</span>	
var imgBtns = [
	//<span class="showClew"> text值为该列页面显示的值，也可使用模板；click设置该列的点击事件，其值可为事件类型或者字符串类型；type值为该列的操作类型；imgtype值为该列显示的图片类型</span>
	{text: "ccay.workflow.label.edit", click: editTest, type: 'img', imgtype: 'edit', isIi8n: true},
	{text: "ccay.workflow.label.delete", click: page.deleteTest, type: 'img', imgtype:'del', isIi8n: true},
	
	//<span class="showClew"> permission值为列所具有的权限，如果有权限才生成该代码，否则返回空字符串；isIi8n设置该列是否需要国际化</span>
	{text: "view", click: "alert('view')", permission: "Service$HtmlArea$read", type: 'img', imgtype: 'view'}
];

//<span class="showClew"> 自定义渲染器参数设置</span>
var showLastDate = {
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	},
	format: function (value, format){
   		return Ccay.Format.toDateBefore(value);
   	},
	render: function (target, value, format) {
       	target.html(this.format(value, format));
   	}
};

var gridOption2 = {
	height: 300,
	wrap: true,
	columns: [
		{columnType: 'select', multi: true},
		
		//<span class="showClew"> columnType:'operate'设置该列显示操作样式，可进行操作功能；btns值为编辑按钮操作的配置，该列显示图标按钮</span>
		{width: 70, freezeable: true, columnType: 'operate', btns: imgBtns},
		{field: 'name', width: 70, header: "ccay.common.label.name", freezeable:true},
		{field: 'sex', width:50, header: "sSex", type: 'bool', format: {isIcon: true}},
		{field: 'age', width:50, header: "sAge", type: 'integer'},
		{field: 'birthday', width:80, header: "sBirthday", type: 'date'},
		{field: 'province', width:80, header: "sProvince", type: 'lookup', format: {code: "province", supportLang: true}},
		{field: 'city', width:70, header: "sCity", type: 'lookup', format: {code: "city", supportLang: true}},
		{field: 'pass', width:100, header: "sPass", type: 'rate', format: {htmlView: true, section: [20, 50, 60]}},
		{field: 'tuition', width:100, header: "sTuition", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
		{field: 'card', width:90, header: "sHobby", type: 'enum', format:{service:'FN:Ccay.example.ui.igird.operation.hobbyData',valueField:'pCode',displayField:'pName'}},
		{field: 'mail', width:100, header: "sMail"},
		{field: 'blog', width:170, header: "sBlog", type:'textarea'},
		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)}
	],
	ajax: {
		url: 'services/ccay/demo/student/list/page/{0}/{1}'
	},
	operation: {
		search: {
			btn: '#btnSearch02',
			panel: '#searchForm02'
		},
		del: {
    		btn: '#btnIconDel02',
    		
    		//<span class="showClew"> 指定删除数据的请求地址</span>
    		url: "services/ccay/demo/student/delete",
    		
    		//<span class="showClew"> 指定删除数据的提示方法</span>
    		fnConfirm: function(result){
    			if (result)
    				alert("您点击了确定按钮");
    			else
    				alert("您点击了取消按钮！");
			}
		}
	}
};

$("#igridDemo2").igrid(gridOption2);
      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title='弹出框增删改查操作' tabid='tab3'>
		<span class="showClew">备注：1.IGrid弹出框增删改查操作Demo展示了在弹出框中的表单查询功能<br>2.可进行增、删、改、保存数据功能，并获取（选中、添加、更新、删除）数据</span><br /><br />
		<input type="button" value="Click me to open dialog!" onclick="Ccay.example.ui.igird.operation.openDialogTest()"/>
		<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html3'>
&lt;input type="button" value="Click me to open dialog!" onclick="openDialogTest()"/>
			</pre>
		</div>
		<h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='js3'>
openDialogTest = function () {
	var showDlgOps = {
		width: 900,
		height: 700,
		cancelClick: true
	};
	Ccay.UI.dialog("ccay/example/ui/igrid/scrollLoadFunction.html", "ccay.common.label.operation", showDlgOps);
};
      		</pre>
      	</div>
      	<div class="try">
			<a  onclick="Ccay.example.openTry('#operationDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	
	<div title="FAQ" tabid='faqtab'>
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row ccay-form-whole">
			                          <samp class="i18n" i18nKey="1.将新增的新行放到列表的最前"></samp>                          
			                         <span class="ccay-form-input"><pre>
insert: {
	btn: '#btnAdd',
	_getInsertSet :function (grid,op) {
		return {
		<font color="green">	//新添行在参考行前或者后(first/after)</font>			
		<font color="red">	position:"first",</font>
		<font color="green">	//新添行的位置是在列表最前或者最后(:first/:last)</font>	
		<font color="red">	posTr: grid.getDataBody().children(':first')</font>
		}
	}
}
</pre></span>
			        </li>
			        <li class="ccay-form-row ccay-form-whole">
			                          <samp class="i18n" i18nKey="2.将新增的新行放到列表的最后"></samp>                          
			                         <span class="ccay-form-input"><pre>
insert: {
	btn: '#btnAdd',
	_getInsertSet :function (grid,op) {
		return {			
		<font color="red">	position:"after",
			posTr: grid.getDataBody().children(':last')</font>
		}
	}
}
</pre></span>
			        </li>		        			          
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>
